<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery性能优化</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: 微软雅黑;
            font-size: 1.6em;
            background: #aad3ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        .list-group-item span{
            margin-right: 10px;
        }
        pre{
            display: none;
        }
        pre:before{
            content: "详细代码如下：";
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>jQuery性能优化</h1>
    <hr>
    <br>
    <h3>jQuery性能优化11条</h3>
    <br>
    <div class="row" >
            <div class="col-md-6 col-md-offset-3 list-group" id="list">
                <div><span>1</span>尽量使用新的jQuery版本</div>
                <div><span>2</span>使用合适的选择器，性能从高到低分别为：ID → 标签 → 类 → 属性 → 伪类；尽量给ID选择器给其他选择器定位上下文</div>
                <div><span>3</span>同一选择器多次出现时应该缓存</div>
                <div><span>4</span>尽量让for、each循环内部只拼字符串而避免选择器等jquery的低性能操作</div>
                <div><span>5</span>遍历数组使用for或while而避免使用.each(),判断一个jQuery对象是否存在可以用id选择器选择后通过元素的长度来判断</div>
                <pre class="list-group-item list-group-item-text"><br>if($(content.length){}</pre>
                <div><span>6</span>设置事件代理。请看下面代码，第一种写法中相当于给每个td分别绑定了一个事件，而第二种写法只给一个元素绑定了事件</div>
                <pre hidden class="list-group-item list-group-item-text"><br >
    $("#table td").click(function () {
        $(this).class("background", "red");
    });

    $("#table").on("click", "td", function () {
        $(this).class("background", "red");
    })
                </pre>
                <div><span>7</span>通过编写jQuery插件减少写大量重复代码</div>
                <div><span>8</span>用“+”拼接字符串可以试试 数组.join()的方法</div>
                <pre class="list-group-item list-group-item-text"><br >
    var array = [];
    for (var i = 0; i < 10000; i++) {
        array[i] = "&lt;li&gt;" + i + "&lt;/li&gt;";
    }
    $("#list").html(array.join());
                </pre>
                <div><span>9</span>合理利用Html5中的data属性</div>
                <pre class="list-group-item list-group-item-text"><br >
    &lt;div id="d1" data-role="page" data-last-value="43"
    data-options="{'name':'daoke'}">&lt;/div>
    读取的时候可以使用以下代码：
    $("#d1").data("role");
    $("#d1").data("lastValue");
    $("#d1").data("options").name;
                </pre>
    <div><span>10</span>尽量使用原生的JavaScript方法，不但性能高，有时更简洁</div>
                <pre class="list-group-item list-group-item-text"><br >
    $(this).class("color", "red");可写成：this.style.color = "red";
                </pre>
                <div><span>11</span>压缩JavaScript文件</div>
            </div>

    </div>
    <div style="height: 500px"></div><!---->
</div>
<script>
$(function() {
    var $item = $("#list>div");
    $item.addClass("list-group-item list-group-item-warning")
            .children().addClass("badge pull-left");
//
    var $sub_item = $("pre");
    $sub_item.addClass("hidden");
    $sub_item.each(function(){
        $(this).prev().append(" <button class='btn btn-default btn-sm'>查看代码 ︾</button>")
                .on("click",".btn",function(){
                    //class中的hidden不能用.show()的方法显示，而只能用.removeClass("hidden")来显示。
                    var $pre = $(this).parent().next();
                    if(!$pre.is(":visible")){
                        $pre.removeClass("hidden");
                        $(this).text("收起代码 ︽");
                    }else{
                        $pre.addClass("hidden");
                        $(this).text("查看代码 ︾");
                    }
                })
    })
})

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>